<template>
  <div>              
  <el-table :data="system.netsInfo.nets"  @row-click='handleCurrentChanges' style="width: 100%"  highlight-current-row>
      <el-table-column
        :label="$t('message.systems.ifName')"
        prop="ifName">
      </el-table-column>
      <el-table-column  :label="$t('message.systems.enable')" >
        <template  slot-scope="scope">   
          <span>{{ scope.row.enable? $t('message.systems.enable'): $t('message.systems.disable') }}</span>
        </template> 
      </el-table-column>
      <el-table-column
        :label="$t('message.systems.type')"
        prop="type">
      </el-table-column>
      <el-table-column
        :label="$t('message.systems.ipaddr')"
        prop="ipaddr">
      </el-table-column>
      <el-table-column
        :label="$t('message.systems.netmask')"
        prop="netmask">
      </el-table-column>
      <el-table-column
        :label="$t('message.systems.gateway')"
        prop="gateway">
      </el-table-column>
      <el-table-column
        :label="$t('message.systems.mainDnsServerAddr')"
        prop="mainDnsServerAddr">
      </el-table-column>
      <el-table-column
        :label="$t('message.systems.subDnsServerAddr')"
        prop="subDnsServerAddr">
      </el-table-column>
    </el-table>
    <setForm id="1" v-show="show">       
       <template slot="boxTop">{{$t('message.systems.ethInfo')}}</template>
          <template slot="boxMain">                
           <mylist :list="list"></mylist>
          </template>
    </setForm>
    <setForm id="2" v-show="show">       
       <template slot="boxTop">{{$t('message.systems.ethSetting')}}</template>
          <template slot="boxMain">                
           <el-row>
            <el-col :span="4" class="col4net">       
              <div class="span3">  
                <label>{{$t('message.systems.ifName')}}</label>    
              </div>        
              <div class="span3" v-show="showEnable">                           
                <label>{{$t('message.systems.enable')}}</label>   
              </div>        
              <div class="span3">                                                  
                <label>{{$t('message.systems.ipaddr')}}</label>   
              </div>        
              <div class="span3">                                                  
                <label>{{$t('message.systems.netmask')}}</label>
              </div>        
              <div class="span3">                                                     
                <label>{{$t('message.systems.gateway')}}</label>  
              </div>        
              <div class="span3">                                                   
                <label>{{$t('message.systems.mainDnsServerAddr')}}</label>    
              </div>        
              <div class="span3">                                                 
                <label>{{$t('message.systems.subDnsServerAddr')}}</label>  
              </div>        
              <div class="span3" v-show="index === 0">                                                   
                <label>{{$t('message.systems.type')}}</label>   
              </div>                                                
            </el-col>
            <el-col :span="20" class="col20">
            <div class="span17">
              <el-input v-model="currenRow.ifName" disabled class="span17_elinput"></el-input>               
              <span v-show="this.errors.has('valiName')" class="text-style" > {{ errors.first('valiName') }} </span>  
            </div>  
            <div class="span17" v-show="showEnable">  
            <el-checkbox v-model="currenRow.enable" >{{$t('message.systems.enable')}}</el-checkbox>   
            </div>   
            <!-- <div class="span4">                 
              <el-checkbox v-model="currenRow.enable" >{{$t('message.systems.enable')}}</el-checkbox>    
            </div>  <br>                      -->
            <div class="span17">
              <el-input v-model="currenRow.ipaddr" v-validate="'ipFormat'"  type="text" class="span17_elinput" :name="$t('message.systems.ipaddr')" :disabled="disabled"></el-input>               
              <span v-show="this.errors.has($t('message.systems.ipaddr'))" class="text-style" > {{ errors.first($t('message.systems.ipaddr')) }} </span>  
            </div>                                                               
            <div class="span17">
              <el-input v-model="currenRow.netmask" v-validate="'ipFormat'"  type="text" class="span17_elinput" :name="$t('message.systems.netmask')" :disabled="disabled"></el-input>               
              <span v-show="this.errors.has($t('message.systems.netmask'))" class="text-style" > {{ errors.first($t('message.systems.netmask')) }} </span>  
            </div>                                                                 
            <div class="span17">
              <el-input v-model="currenRow.gateway" v-validate="'ipFormat'"  type="text"  class="span17_elinput" :name="$t('message.systems.gateway')" :disabled="disabled"></el-input>               
              <span v-show="this.errors.has($t('message.systems.gateway'))" class="text-style" > {{ errors.first($t('message.systems.gateway')) }} </span>  
            </div>                                                              
            <div class="span17">
              <el-input v-model="currenRow.mainDnsServerAddr" v-validate="'ipFormat'"  type="text"  class="span17_elinput" :name="$t('message.systems.mainDnsServerAddr')" :disabled="disabled"></el-input>               
              <span v-show="this.errors.has($t('message.systems.mainDnsServerAddr'))" class="text-style" > {{ errors.first($t('message.systems.mainDnsServerAddr')) }} </span>  
            </div>                                                                  
            <div class="span17">
              <el-input v-model="currenRow.subDnsServerAddr" v-validate="'ipFormat'"  type="text"  class="span17_elinput" :name="$t('message.systems.subDnsServerAddr')" :disabled="disabled"></el-input>               
              <span v-show="this.errors.has($t('message.systems.subDnsServerAddr'))" class="text-style" > {{ errors.first($t('message.systems.subDnsServerAddr')) }} </span>  
            </div>           
              <div class="span17" v-show="index === 0">
              <el-radio-group v-model="currenRow.type">
                <el-radio label="static"></el-radio>
                <el-radio label="dhcp"></el-radio>
              </el-radio-group>
              </div>
            </el-col>
          </el-row>                           
          <el-button  class="btnsave" @click="onSaveNetCfg">{{$t('message.save')}}</el-button>
          </template>   

    </setForm>
  </div>
</template>

<script>
import topTable from "../../../../components/topTable";
import setForm from "@/components/setForm";
import mylist from "@/components/MyList";
import { mapState } from "vuex";
import { api, getHostName } from "../../../../libs/api";
import ebus from "../../../../libs/ebus";
export default {
  created() {
    // this.interval = setInterval(() => {
    //   ebus.emit("getNetsState", this);
    // }, 1000);
    ebus.emit("getNetsInfo", this);
  },
  beforeDestroy() {
    clearInterval(this.interval);
  },
  computed: {
    ...mapState(["system"]),
    showEnable() {
      return (
        this.index !== 0 &&
        (this.system.netsInfo &&
        this.system.netsInfo.nets &&
        this.system.netsInfo.nets.length &&
        this.system.netsInfo.nets.length > 1) 
      );
    },
    list() {
      var item = this.system.netsInfo.nets[this.index].info;
      var arr = [];
      for (var proptyName in item) {
        if (proptyName == "connected") {
          arr.push({
            name: this.$t("message.systems." + proptyName),
            value: item[proptyName]
              ? this.$t("message.yes")
              : this.$t("message.no")
          });
        } else if (proptyName == "sendSpeed" || proptyName == "recvSpeed") {
          var val = 0;
          if (/\d/.test(item[proptyName])) {
            val = parseInt(
              item[proptyName].substr(0, item[proptyName].length - 1)
            );
          }
          
          if (val > 1024) {
            if (val > 1024 * 1024) {
              val = (val / 1024 / 1024).toFixed(1) + "M/s";
            } else {
              val = (val / 1024).toFixed(1) + "K/s";
            }
          } else {
            val = val + "B/s";
          }
          arr.push({
            name: this.$t("message.systems." + proptyName),
            value: val
          });
        } else if (proptyName == "duplexMode") {
          arr.push({
            name: this.$t("message.systems." + proptyName),
            value: item[proptyName]
              ? this.$t("message.systems." + item[proptyName])
              : ""
          });
        } else {
          arr.push({
            name: this.$t("message.systems." + proptyName),
            value: item[proptyName]
          });
        }
      }
      return arr;
    },
    disabled() {
      if (this.currenRow && this.currenRow.type) {
        return this.currenRow.type == "dhcp";
      } else {
        return false;
      }
    }
  },
  data() {
    return {
      isEffected: false,
      interval: null,
      show: false,
      currenRow: {},
      index: 0,
      enable: true,
      ip: "",
      code: "",
      gate: "",
      dnsServer: "",
      ipmethod: "",
      sysTime: "",
      serverAddr: "",
      autoEnable: true,
      file: "",
      eth: {},
      eths: [
        {
          label: "eth0",
          value: "eth0"
        },
        {
          label: "eth1",
          value: "eth1"
        }
      ],
      list1: [
        { name: "名称", value: "名称" },
        { name: "MAC", value: "00:19:0f:20:35:fa" },
        { name: "序列号", value: "1bcfb46e-019d-11e8-b5ea-00190f2035fa" },
        { name: "条形码", value: "6901236377512" },
        { name: "模块名称", value: "MCN模块" },
        { name: "软件版本号", value: "V1.0" },
        { name: "硬件版本号", value: "V1.0" }
      ],
      columns: [
        {
          label: this.$t("message.systems.ifName"),
          prop: "ifName"
        },
        {
          label: this.$t("message.systems.enable"),
          prop: "enable"
        },
        {
          label: this.$t("message.systems.type"),
          prop: "type"
        },
        {
          label: this.$t("message.systems.ipaddr"),
          prop: "ipaddr"
        },
        {
          label: this.$t("message.systems.netmask"),
          prop: "netmask"
        },
        {
          label: this.$t("message.systems.gateway"),
          prop: "gateway"
        },
        {
          label: this.$t("message.systems.mainDnsServerAddr"),
          prop: "mainDnsServerAddr"
        },
        {
          label: this.$t("message.systems.subDnsServerAddr"),
          prop: "subDnsServerAddr"
        }
      ]
    };
  },
  components: {
    setForm,
    mylist,
    topTable
  },
  methods: {
    onSaveNetCfg() {
      if (
        this.errors.has("valiName") ||
        this.errors.has(this.$t("message.systems.ipaddr")) ||
        this.errors.has(this.$t("message.systems.netmask")) ||
        this.errors.has(this.$t("message.systems.gateway")) ||
        this.errors.has(this.$t("message.systems.mainDnsServerAddr")) ||
        this.errors.has(this.$t("message.systems.subDnsServerAddr"))
      ) {
        return;
      }
      this.isEffected = false;
      var option = JSON.stringify(this.currenRow);
      api.onRequest(
        "$method.$set.sys.net.lan" + this.index + ".cfg",
        option,
        null,
        null,
        function(message, reqReply) {
          var res = JSON.parse(message);
          if (res.code == 0) {
            ebus.emit("getNetsInfo", this);
            this.notification("Success", this.$t("message.systems.IpChanged"));
          } else {
            this.isEffected = true;
            this.showCodeMsg(res.code, this, res.msg);
          }
        }.bind(this)
      );
      if (this.currenRow.type == "static") {
        var testOnline = null;
        testOnline = setTimeout(() => {
          var x = api.isConnected();
          console.log("isConnected:", x);
          var ws = new WebSocket("ws://" + getHostName() + ":8080/_ws/stbp");
          ws.onopen = function() {
            this.isEffected = true;
            clearTimeout(testOnline);
          }.bind(this);
          if (!this.isEffected) {
            window.location.href = "http://" + this.currenRow.ipaddr + ":8080";
          }
        }, 2000);
      } else if (this.currenRow.type == "dhcp") {
        var testOnline = null;
        testOnline = setTimeout(() => {
          var ws = new WebSocket("ws://" + getHostName() + ":8080/_ws/stbp");
          ws.onopen = function() {
            this.isEffected = true;
            clearTimeout(testOnline);
          }.bind(this);
          if (!this.isEffected) {
            window.location.href = "http://" + this.currenRow.ipaddr + ":8080";
          }
        }, 2000);
      }
    },
    handleCurrentChanges(val) {
      console.log('val',val)
      this.index = val.index;
      this.currenRow = val;
      this.show = true;
    }
  }
};
</script>

<style scoped>

</style>

